<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>天天生鲜-购物车</title>
	<link rel="stylesheet" type="text/css" href="/static/css/reset.css">
	<link rel="stylesheet" type="text/css" href="/static/css/main.css">
    <script type="text/javascript" src="/static/js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="/static/js/register.js"></script>
	<script type="text/javascript" src="/static/js/jquery-ui.min.js"></script>
	<script type="text/javascript" src="/static/js/slide.js"></script>

    <script type="text/javascript">
        function total() {
            let total_all = 0, total_count = 0, total_checked = 0;
            $('.cart_list_td').each(function () {
                let price = parseFloat($(this).children('.col05').children('em').html()); //价格
                let count = parseInt($(this).find('.num_show').val());//数量
                let small_total = price * count; //小计
                if ($(this).children('.col01').children('input').prop('checked')) {
                    //如果选中
                    total_all += small_total;
                    total_checked++;
                }
                total_count++;
                $(this).children('.col07').html(small_total.toFixed(2) + '元');//每一个购物车的小计
            })
            $('.settlements .col03 em').html(total_all.toFixed(2));//总价
            $('.settlements .col03 b').html(total_checked);//选中的购物车数量
            $('.total_count em').html(total_count);//一共多少商品
        }

        $(function () {
            total()

            //全选,全消除
            $('#check_all').click(function () {
                let checked = $(this).prop('checked');
                $('input[type=checkbox]:not(#check_all)').prop('checked', checked);
                total();
            })
            //选中或取消
            $('input[type=checkbox]:not(#check_all)').click(function () {
                let len1 = $(':checkbox:not(#check_all)').length;//当前页面中除了全选之外的所有checkbox
                let len2 = $(':checked:not(#check_all)').length; //当前页面中除了全选之外的所有选中的checkbox
                $('#check_all').prop('checked', len1 === len2);
                total();
            })

            $('.add').click(function () {
                let num = parseInt($(this).next().val());
                num++;
                $(this).next().val(num).blur();
            })
            $('.minus').click(function () {
                let num = parseInt($(this).prev().val());
                num--;
                $(this).prev().val(num).blur();
            })
            $('.num_show').blur(function () {
                let num = parseInt($(this).val())
                {#if (isNaN(num) || num &lt;= 1){#}
                {#    num = 1;}#}
                {#if (num>100){#}
                {#    num = 100;}#}
                $(this).val(num);
                let cid =$(this).parent().parent().prevAll().find('input').val();
                $.get('/edit/', {'cid': cid, 'count': num}, function (data) {
                    location.href = '/cart/';
                })
                total();
            })
                //删除操作
                $('.remove').click(function () {
                    let cid = $(this).parent().prevAll().find('input').val();
                    $.get('/remove/', {'cid': cid}, function (data) {
                        location.href = '/cart/';
                    })
                })
        })
    </script>

</head>
<body>
	<div class="header_con">
		<div class="header">
			<div class="welcome fl">欢迎来到天天生鲜!</div>
			<div class="fr">

				{% if request.session.user_names %}
                    <div class="login_info fl">
					欢迎您：<em>{{ request.session.user_names }}</em>
                    <a href="/logout/">退出</a>
				    </div>
                {% else %}
                    <div class="login_btn fl">
					<a href="/login/">登录</a>
					<span>|</span>
					<a href="/register/">注册</a>
				    </div>
                {% endif %}

				<div class="user_link fl">
					<span>|</span>
					<a href="/user_center_info/">用户中心</a>
					<span>|</span>
					<a href="/cart/">我的购物车</a>
					<span>|</span>
					<a href="/user_center_order/">我的订单</a>
				</div>
			</div>
		</div>		
	</div>

	<div class="search_bar clearfix">
		<a href="/" class="logo fl"><img src="/static/images/logo.png"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;购物车</div>
		<div class="search_con fr">
			<input type="text" class="input_text fl" name="" placeholder="搜索商品">
			<input type="button" class="input_btn fr" name="" value="搜索">
		</div>		
	</div>

	<div class="total_count">全部商品<em>2</em>件</div>	
	<ul class="cart_list_th clearfix">
		<li class="col01">商品名称</li>
		<li class="col02">商品单位</li>
		<li class="col03">商品价格</li>
		<li class="col04">数量</li>
		<li class="col05">小计</li>
		<li class="col06">操作</li>
	</ul>

    <form action="/place_order2/" method="get">
    {% for foo in goodslist %}
	<ul class="cart_list_td clearfix">
		<li class="col01"><input type="checkbox" name="cid" checked="checked" value="{{ foo.id }}"></li>
		<li class="col02"><img src="/static/{{ foo.goods.gpic }}"></li>
		<li class="col03">{{ foo.goods.gtitle }}<br><em>{{ foo.goods.gunit}}</em></li>
		<li class="col04">500g</li>
		<li class="col05"><em>{{ foo.goods.gprice}}</em></li>
		<li class="col06">
			<div class="num_add">
				<a href="javascript:;" class="add fl" id="add">+</a>
				<input type="text" class="num_show fl" value="{{ foo.count }}">
				<a href="javascript:;" class="minus fl" id="minus">-</a>
			</div>
		</li>
		<li class="col07">{{ foo.goods.gprice }}*{{ foo.count }}</li>
		<li class="col08"><a href="javascript:;" class="remove">删除</a></li>
	</ul>
    {% endfor %}


	<ul class="settlements">
		<li class="col01"><input type="checkbox" name="" checked="checked" id="check_all"></li>
		<li class="col02">全选</li>
		<li class="col03">合计(不含运费)：<span>¥</span><em>6.66</em><br>共计<b>6</b>件商品</li>
{#		<li class="col04"><a href="/place_order2/">去结算</a></li>#}
		<li class="col04"><input type="submit" value="去结算" class="btn btn-default"></li>
	</ul>
    </form>

	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>		
		</div>
		<p>CopyRight © 2016 北京天天生鲜信息技术有限公司 All Rights Reserved</p>
		<p>电话：010-****888    京ICP备*******8号</p>
	</div>
	
</body>
</html>